<template>
  <div class="store-item transition-ease">
    <div class="image transition-ease" @click="goStore(storeInfo.storeId)">
      <img v-lazy="storeInfo.storePhoto"/>
    </div>
    <div class="summary">
      <div class="desc" @click="goStore(storeInfo.storeId)">{{storeInfo.storeName}}</div>
      <div class="togo contant-store" @click="onContactShop(storeInfo.storeId)">联系供应商</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    storeInfo: {
      type: Object,
      default: () => { return {} }
    }
  },
  methods: {
    goStore(storeId) { // 跳转店铺
      this.$router.push('/shop/' + storeId)
    },
    // 和商家店铺聊天
    onContactShop(storeId) {
      const _this = this
      this.$store.dispatch('fetchUserRole', {
        token: this.$store.getters.token,
        callback(role) {
          _this.$store.dispatch('fetchCustomerByStoreId', {
            mobile: _this.$store.getters.mobile,
            storeId: storeId
          })
          // if (role != 2) {
          //   _this.$toast('您不是采购商，只有采购商才可以使用聊天功能')
          // } else {
          //   _this.$store.dispatch('fetchCustomerByStoreId', {
          //     mobile: _this.$store.getters.mobile,
          //     storeId: storeId
          //   })
          // }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.store-item{
  width: 180px;
  height: 272px;
  background-color: #fff;
  border: 1px solid #F6F6F6;
  cursor: default;
  &:hover {
    box-shadow: 3px 3px 3px #DDDDDD;
    border: 1px solid #DDDDDD;
  }
  .image {
    height: 180px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    width: 100%;

    &:hover {
      background-size: 115% 115%;
    }
  }
  .summary{
    height: 92px;
    border-top: 1px solid #F6F6F6;
    padding: 10px;
    position: relative;
    .desc{
      word-break: break-all;
      font-size: 12px;
      color: #444;
      &:hover {
          color: #F00384;
      }
    }
    .togo{
      width: 90px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 3px;
      border: 1px solid;
      color: #F00384;
      position: absolute;
      right: 10px;
      bottom: 10px;
      cursor: pointer;
    }
  }
}
</style>